<template>
  <div class="top-comp">
    <el-row :gutter="20">
      <el-col :span="6"><TotalSale :reportData="reportData" /></el-col>
      <el-col :span="6"><TotalOrder :reportData="reportData" /></el-col>
      <el-col :span="6"><TodayUser :reportData="reportData" /></el-col>
      <el-col :span="6"><TotalUser :reportData="reportData" /></el-col>
    </el-row>
  </div>
</template>

<script>
import TotalSale from './TotalSale.vue'
import TotalOrder from './TotalOrder.vue'
import TodayUser from './TodayUser.vue'
import TotalUser from './TotalUser.vue'
import { getReportData } from '../../api'
export default {
  components: {
    TotalSale,
    TotalOrder,
    TotalUser,
    TodayUser,
  },
  data() {
    return {
      reportData: {},
    }
  },
  async mounted() {
    const res = await getReportData()
    this.reportData = res.data
  },
}
</script>

<style lang="scss">
.top-comp {
  span {
    font-size: 14px !important;
    color: #464545;
    &.increase {
      display: inline-block;
      width: 0;
      height: 0;
      border-width: 4px;
      border-style: solid;
      border-color: transparent transparent green transparent;
      margin-left: 10px;
      transform: translateY(-50%);
    }
    &.decrease {
      display: inline-block;
      width: 0;
      height: 0;
      border-width: 4px;
      border-style: solid;
      border-color: red transparent transparent transparent;
      margin-left: 10px;
      transform: translateY(50%);
    }
  }
  .css-1 {
    margin-left: 8px;
    font-weight: 550;
  }
}
</style>
